<template>
  <div class="index">
    <div class="one">
      <div>兑换码管理</div>
      <div class="one-right" @click="toAdd">生成兑换码</div>
    </div>
    <div class="center">
      <div>
        生成时间 <input type="date" :value="addTime1" /> 到
        <input type="date" :value="addTime2" />
      </div>
      <div>
        区域：
        <el-select v-model="region1" placeholder="全部">
           <el-option :label="v.name" :value="v.id" v-for="v in quyuList" :key="v.id"></el-option>

        </el-select>

        类型:
        <el-select v-model="region2" placeholder="全部">
          <el-option label="一小时卡" value="一小时卡"></el-option>
          <el-option label="三小时卡" value="三小时卡"></el-option>
          <el-option label="周卡" value="周卡"></el-option>
          <el-option label="月卡" value="月卡"></el-option>
          <el-option label="季卡" value="季卡"></el-option>
        </el-select>
      </div>
      <div>
        使用情况：<el-select v-model="region3" placeholder="全部">
          <el-option label="可使用" value="1"></el-option>
          <el-option label="已过期" value="2"></el-option>
           <el-option label="已使用" value="3"></el-option>
        </el-select>
        兑换码：<input
          type="text"
          placeholder="请输入你的兑换码"
          style="width: 120px"
          :value="duihuan"
        />
      </div>
      <div class="last">
        平台：<input type="text" style="width: 80px" v-model="platform" />
        <div class="chaxun" @click="inquire">查询</div>
        <div class="chaxun" @click="congz">重置</div>
      </div>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="startTime" label="生成时间"> </el-table-column>
        <el-table-column prop="areaId" label="区域" width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="类型"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="platform" label="平台"> </el-table-column>
        <el-table-column prop="code" label="兑换码"> </el-table-column>
        <el-table-column prop="endTime" label="有效期"> </el-table-column>
        <el-table-column prop="state" label="使用情况"> </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        style="float: right"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 5,
      total: 4,
      region1: "",
      region2: "",
      region3: "",
      addTime1: "",
      addTime2: "",
      platform: "",
      duihuan: "",
      quyuList:[],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      useqink:['可使用','已过期','已使用'],
      multipleSelection: [],
    };
  },

  methods: {
    handleCurrentChange: function (e) {
      console.log(e)
      this.getData()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val)
    },
    toAdd() {
      this.$router.push("/home/dhmgl/adddhm");
    },
    //查询
    inquire() {
      if(this.region3){
this.region3 = parseInt(this.region3)
      }
      
      console.log(
        this.region1,
        this.region2,
        this.region3,
        this.addTime1,
        this.addTime2,
        this.platform
      );
      
      this.getData();
    },
    //重置
    congz() {
      this.region1 = "";
      this.region2 = "";
      this.region3 = "";
      this.addTime1 = "";
      this.addTime2 = "";
      this.platform = "";
      this.getData();
    },
    //初次渲染
    getData() {
      this.$axios({
        url:'/code/area',
        method:'get'
      }).then((res)=>{
        console.log(res);
        this.quyuList=res.data.data
      });
      this.$axios({
        url: "/code/list",
        method: "get",
        params: {
          page: this.page,
          limit: this.limit,
          startTime:this.addTime1,
          endTime:this.addTime2,
          areaId:this.region1,
          tName:this.region2,
          state:this.region3,
          code:this.duihuan,
          platform:this.platform
        }
      }).then((res) => {
        console.log(res);
        for(let i=0;i<res.data.data.list.length;i++){
          for(let j=0;j<this.quyuList.length;j++){
            
            if(res.data.data.list[i].areaId==this.quyuList[j].id){
              res.data.data.list[i].areaId=this.quyuList[j].name
             
             continue;
            }
          }
         res.data.data.list[i].state=this.useqink[res.data.data.list[i].state-1]  
        }
        this.tableData = res.data.data.list;
        
        this.total = res.data.data.totalCount;
        console.log(res);
      });
      
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.index {
  line-height: 30px;
  padding-left: 20px;

  .one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    font-weight: 600;

    .one-right {
      width: 100px;
      height: 50px;
      color: white;
      background-color: rgb(2, 167, 240);
      line-height: 50px;
      text-align: center;
      border-radius: 10px;
      cursor: pointer;
    }
  }
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.center {
  display: flex;
  margin-top: 10px;
  height: 80px;
  align-items: center;
  justify-content: space-around;
  background-color: #eee;
  line-height: 41px;
  font-weight: 500;
  font-size: 16px;

  input {
    height: 40px;
    width: 120px;
    border: 0px;
  }
  .el-select {
    width: 120px;
    border: 0px;
  }
}

.last {
  display: flex;

  .chaxun {
    width: 70px;
    background-color: rgb(88, 88, 88);
    border-radius: 10px;
    color: white;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
  }
}
</style>